<template>
  <a-layout :class="['layout', device]">
    <a-layout-header class="dashboard-layout-header">
      <main-header mode="layoutMode" :menus="[]" />
    </a-layout-header>
    <a-layout-content class="main login-layout-content">
      <route-view></route-view>
    </a-layout-content>
    <a-layout-footer class="footer">
      <div class="links">
        <a href="_self">{{ $t('common.help') }}</a>
        <a href="_self">{{ $t('common.privacy') }}</a>
        <a href="_self">{{ $t('common.policy') }}</a>
      </div>
      <div class="copyright">Copyright &copy; 2022 {{ $t('common.cprText') }}</div>
    </a-layout-footer>
  </a-layout>
</template>

<script>
import { MainHeader } from '@/components'
import RouteView from './RouteView'
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'UserLayout',
  components: {
    RouteView,
    MainHeader
  },
  mixins: [mixinDevice],
  data () {
    return {}
  },
  mounted () {
    document.body.classList.add('userLayout')
  },
  beforeDestroy () {
    document.body.classList.remove('userLayout')
  }
}
</script>

<style lang="less" scoped>
.layout {
  height: 100%;
  min-width: 1200px;
  min-height: 600px;
  .login-layout-content {
    flex: 1;
  }

  .footer {
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;

    .links {
      margin-bottom: 8px;
      font-size: 14px;
      a {
        color: rgba(0, 0, 0, 0.45);
        transition: all 0.3s;
        &:not(:last-child) {
          margin-right: 40px;
        }
      }
    }

    .copyright {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
  }
}
</style>
